<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        <el-breadcrumb-item>标签列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入标签名" clearable v-model="name" @clear="searchTag">
              <el-button slot="append" icon="el-icon-search" @click="searchTag"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="showAddDialog()">添加权限</el-button>
          </el-col>
        </el-row>
        <el-table :data="taglist" border stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="作者" prop="user.username"></el-table-column>
          <el-table-column label="头像">
            <template slot-scope="scop">
              <img :src="imgUrl+'user/'+scop.row.avatar" style="height: 50px ;width:50px;border-radius:50% " >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="removeTagById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </el-card>

      <!-- ===============修改菜单=====================================             -->
      <div>

        <el-dialog title="修改标签" :visible.sync="editTagFormVisible">
          <el-form ref="editTagForm" :rules="editTagRules":model="editTag" label-width="80px" size="mini">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="editTag.name"></el-input>
            </el-form-item>
            <el-form-item label="作者ID" prop="authorId">
              <el-input v-model="editTag.authorId"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
              <el-input  type="hidden" v-model="editTag.avatar"></el-input>
              <el-upload
                  class="avatar-uploader"
                  :action="url"
                  name="avatar"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="editTagFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyTag">确 定</el-button>
          </div>
        </el-dialog>

      </div>

      <div>
        <!--====================添加表单=================================        -->
        <el-dialog title="添加标签" :visible.sync="addTagFormVisible">
          <el-form ref="insertTagForm" :rules="addTagRules" :model="addTag" label-width="80px" size="mini">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="addTag.name"></el-input>
            </el-form-item>
            <el-form-item label="作者ID" prop="authorId">
              <el-input v-model="addTag.authorId"></el-input>
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
              <el-input  type="hidden" v-model="addTag.avatar"></el-input>
              <el-upload
                  class="avatar-uploader"
                  :action="url"
                  name="avatar"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="addTagFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertTag">确 定</el-button>
          </div>
        </el-dialog>

      </div>
    </div>




  </div>

</template>

<script>
export default {
  name: "Tag.vue",
  data(){
    return {
      addTagFormVisible:false,
      editTagFormVisible:false,
      pageNum: 1,
      pageSize: 5,
      taglist: [],
      total: 0,
      name: "", //权限名称
      urlTypeDesc: "菜单权限",
      parentMenus:[],
      editTag:{
        id:0,
        name:'',
        authorId:'',
        avatar:'',

      },
      addTag:{
        id:0,
        name:'',
        authorId:'',
        avatar:'',
      },
      imageUrl:'',
      url:this.$Myurl.serverUrl+'tag/upload',
      imgUrl: this.$Myurl.imgUrl,
      editTagRules:{
        name:[
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        authorId:[
          {required: true, message: "权重不能为空", trigger: "change"}
         ],
        avatar:[{
          required: true, message: "头像不能为空", trigger: "change"
        }]
      },
      addTagRules:{
        name:[
          {required: true, message: "名称不能为空", trigger: "blur"}
        ],
        authorId:[
          {required: true, message: "权重不能为空", trigger: "change"}
        ],
        avatar:[{
          required: true, message: "头像不能为空", trigger: "change"
        }]
      }

    };

  },
  methods:{

    //添加图片前的函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addTag.avatar=res.data;
    },
    //添加图片后的函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


    //确认修改
    modifyTag(){
      let url ="tag/modify"
      this.$axios.post(url,this.editTag).then(res=>{
        if (res.data.code==200) {
          this.editTagFormVisible=false
          this.reloadData()
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })

    },

    //确认添加
    insertTag(){
      let url ="tag/addTag"
      this.$axios.post(url,this.addTag).then(res=>{
        if (res.data.code==200) {
          this.addTagFormVisible=false
          this.reloadData()
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },


    handleSizeChange(size){
      this.pageSize=size;
      this.reloadData()

    },
    handleCurrentChange(now){
      this.pageNum=now;
      this.reloadData()

    },
    searchTag(){
      this.reloadData()

    },
    //弹出修改框
    showEditDialog(row){
      this.editTagFormVisible=true
      //通过双向绑定进行回显数据
      this.editTag=row
    },
    //弹出添加框
    showAddDialog(){
      this.addTagFormVisible=true

    },

    removeTagById(id) {
      let url = "tag/delTag/" + id;
      this.$axios.delete(url).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          })
          this.reloadData()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败',
            duration: 1000,
          })
        }
      })
    },


   /* //查询出父菜单
    reloadParentMenu(){
      let url ="permission/reloadParentMenu"
      this.$axios.get(url).then(res=>{
        if (res.data.code==200) {
          this.parentMenus=res.data.data;
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    },*/




    reloadData(){
      let url ="tag/taglist"
      this.$axios.get(url,{
        params:{
          name:this.name,
          now:this.pageNum,
          size:this.pageSize,
        }
      }).then(res=>{
        if (res.data.code==200) {
          this.taglist=res.data.data.list;
          this.pageNum=res.data.data.pageNum;
          this.pageSize=res.data.data.pageSize;
          this.total=res.data.data.total
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.reloadData();

  }


}
</script>

<style scoped>

</style>